<template>
  <div class="preview">
    <div class="close-icon" @click="stopVideo">
      <close-outlined style="color: white"/>
    </div>
    <div id="player" class="preview-content">

    </div>
  </div>
</template>

<script setup>
import {CloseOutlined} from "@ant-design/icons-vue";
import {ref} from "@vue/reactivity";
import {onMounted} from "@vue/runtime-core";

// eslint-disable-next-line no-undef
const props = defineProps({
  type: {
    type: String,
    default: "image",
  },
  url: {
    type: String,
    default: "",
  },
});
const player = ref();
const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse

const init = () => {
  // 设置播放容器的宽高并监听窗口大小变化
  window.addEventListener("resize", () => {
    player.value.JS_Resize();
  });
};

const createPlayer = () => {
  console.log(window);
  player.value = new window.JSPlugin({
    szId: "player",
    szBasePath: "./h5player",
    iMaxSplit: 1,
    iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
    openDebug: true,
    // oStyle: {
    //   borderSelect: IS_MOVE_DEVICE ? "#000" : "#FFCC00",
    // }
  });

  // 事件回调绑定
  player.value.JS_SetWindowControlCallback({
    windowEventSelect(iWndIndex) {  //插件选中窗口回调
      console.log("windowSelect callback: ", iWndIndex);
    },
    pluginErrorHandler(iWndIndex, iErrorCode, oError) {  //插件错误回调
      console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
    },
    windowEventOver(iWndIndex) {  //鼠标移过回调
      //console.log(iWndIndex);
    },
    windowEventOut(iWndIndex) {  //鼠标移出回调
      //console.log(iWndIndex);
    },
    windowEventUp(iWndIndex) {  //鼠标mouseup事件回调
      //console.log(iWndIndex);
    },
    windowFullCcreenChange(bFull) {  //全屏切换回调
      console.log("fullScreen callback: ", bFull);
    },
    firstFrameDisplay(iWndIndex, iWidth, iHeight) {  //首帧显示回调
      console.log("firstFrame loaded callback: ", iWndIndex, iWidth, iHeight);
    },
    performanceLack() {  //性能不足回调
      console.log("performanceLack callback: ");
    }
  });
};
// eslint-disable-next-line no-undef
const emit = defineEmits(["close"]);

const playVideo = () => {
  player.value.JS_Play(props.url, {playURL: props.url, mode: 1}, 0).then(
      () => {
        console.log("realplay success");
      },
      e => {
        console.error(e);
      }
  );
};
const stopVideo = () => {
  player.value.JS_Stop(0).then(
      () => {
        console.log("JS_Stop success");
        emit("close");
      },
      e => {
        console.error(e);
        emit("close");
      }
  );
};
onMounted(() => {
  init();
  createPlayer();
  playVideo();
});

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
